<!doctype html>
<html>
<head>
    <meta charset="utf-8" />
	<meta name="viewport" content="width=620, initial-scale=1, maximum-scale=1">
    <title>jQuery gMap - Examples</title>
	<link href='http://fonts.googleapis.com/css?family=Lato:bolditalic' rel='stylesheet' type='text/css'>
	<link rel="stylesheet" href="css/example.css" />
</head>
<body>

<a href="http://github.com/marioestrada/jQuery-gMap"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_red_aa0000.png" alt="Fork me on GitHub"></a>

<h1 class="title">jQuery gMap - Google Maps API V3</h1>

<p><strong>gMap</strong> is a jQuery plugin that helps you embed Google Maps into your website. With less than 2 KB (minified and gzipped) in size it is very flexible and highly customizable</p>

<p>Original version by <a href="http://gmap.nurtext.de/">Cedric Kasner</a>, modified by <a href="http://mario.ec">Mario Estrada</a> to use the <a href="http://code.google.com/apis/maps/documentation/javascript/">Google Maps API V3</a>.</p>

<h1 id="examples">Examples</h1>

<h2>Default View</h2>

<div id="map" class="map">
    <p>This will be replaced with the Google Map.</p>
</div>

<h3>Code:</h3>
<pre>
$('#map').gMap();
</pre>

<h2>Custom Controls and Map Type</h2>
<div id="map_controls" class="map">
    <p>This will be replaced with the Google Map.</p>
</div>

<h3>Code:</h3>
<pre>
$('#map_controls').gMap(
{
     latitude: -2.206,
     longitude: -79.897,
     maptype: 'TERRAIN',
     zoom: 8,
     controls: {
         panControl: true,
         zoomControl: false,
         mapTypeControl: true,
         scaleControl: false,
         streetViewControl: false,
         overviewMapControl: false
     }
});
</pre>

<h2>Markers</h2>
<div id="map_addresses" class="map">
    <p>This will be replaced with the Google Map.</p>
</div>

<h3>Code:</h3>
<pre>
 $('#map_addresses').gMap({
	address: "Quito, Ecuador",
	zoom: 5,
	markers:[
		{
			latitude: -2.2014,
			longitude: -80.9763,
			html: "_latlng"
		},
		{
			address: "Guayaquil, Ecuador",
			html: "My Hometown",
			popup: true
		},
		{
			address: "Galapagos, Ecuador",
			html: "_address"
		}
	]
});
</pre>

<h2>Kitchen Sink - Extended Usage</h2>
<div id="map_extended" class="map">
    <p>This will be replaced with the Google Map.</p>
</div>

<h3>Code:</h3>
<pre>
$("#map_extended").gMap({
	controls: false,
	scrollwheel: true,
	maptype: 'TERRAIN',
	markers: [
		{
			latitude: 47.670553,
			longitude: 9.588479,
			icon: {
				image: "images/gmap_pin_orange.png",
				iconsize: [26, 46],
				iconanchor: [12,46]
			}
		},
        {
			latitude: 47.65197522925437,
			longitude: 9.47845458984375
		},
		{
			latitude: 47.594996,
			longitude: 9.600708,
			icon: {
				image: "images/gmap_pin_grey.png",
				iconsize: [26, 46],
				iconanchor: [12,46]
			}
		}
	],
	icon: {
		image: "images/gmap_pin.png", 
		iconsize: [26, 46],
		iconanchor: [12, 46]
	},
	latitude: 47.58969,
	longitude: 9.473413,
	zoom: 10
});
</pre>

<div id="footer">
	<p><strong>Licensed under Creative Commons <a href="http://creativecommons.org/licenses/by-sa/3.0/">BY-SA 3.0</a>.</strong></p>
</div>

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="jquery.gmap.js"></script>
<script type="text/javascript" src="examples.js"></script>
<script type="text/javascript" charset="utf-8">
$('body').delegate('a[href^="#"]', 'click', function()
{
	var id = $(this).attr('href').replace('#', '');
	var offset = $('#' + id).offset();
	$('html, body').animate({ scrollTop: offset.top }, 350);
});
</script>

</body>
</html>